<template>
  <div class="w-[100%] flex items-center">
    <a-tree-select
      :data="treeData"
      placeholder="请选择"
      :fieldNames="{
        key: 'deptId',
        title: 'deptName',
        children: 'children',
      }"
      @change="handleTreeSelectChange"
      style="flex:1" />
      <a-checkbox v-if="props.hasChild" :value="isChildDept" @change="handleHasChild">包含子组织</a-checkbox>
      <a-checkbox v-if="props.hasStop" :value="isStop" @change="handleStop">包含停用</a-checkbox>
  </div>
</template>
<script setup>
import { h, ref, onMounted ,computed } from 'vue';
import { IconCalendar } from '@arco-design/web-vue/es/icon';
import { getDeptList } from '@/api/module/dept';
import { fallbackWithSimple } from '@intlify/core-base/dist/core-base';

import {handleTree } from '@/utils'
const props = defineProps({
  modelValue: {
    type: String,
  },
  hasChild:{
    type: Boolean,
    default: false,
  },
  hasStop:{
    type: Boolean,
    default: false,
  },
  hasChildValue: {
    type: Boolean,
    default: true,
  },
  hasStopValue: {
    type: Boolean,
    default: true,
  },
});

const isChildDept = computed(()=>props.hasChildValue)
const isStop = computed(()=>props.hasChild)

const emit = defineEmits(['update:modelValue','update:hasChildValue','update:hasStopValue']);

const treeData = ref([]);

const handleTreeSelectChange = (node) => {
    emit('update:modelValue',node)
};

const  handleHasChild = (value) =>{
    emit('update:hasChildValue',value)
}
const  handleStop = (value) =>{
    emit('update:hasStopValue',value)
}

onMounted(() => {
  getDeptList().then((res) => {
    treeData.value = handleTree(res.data,'deptNo','pdeptNo')
  });
});
</script>
